<template>
  <div class="title">{{ index }}、{{ data.title }}</div>
  <div class="option">
    <el-radio-group v-model="data.studentAnswer">
      <div v-for="(item, index) in data.options" :key="index" class="item">
        <el-radio :label="index">{{ index }}:{{ item }}</el-radio>
      </div>
    </el-radio-group>
  </div>
</template>
<script lang="ts" setup>
import {defineProps, onMounted, Ref, ref} from "vue"
import {ChooseType} from "../interface"
const props = defineProps<{
  data: ChooseType
  indexNum: number
}>()
const index = ref(0)
onMounted(() => {
  index.value = props.indexNum + 1
})
const data: Ref<ChooseType> = ref({
  title: "",
  options: {
    A: "",
    B: "",
    C: ""
  },
  difficulty: 0,
  grouping: "",
  answer: "",
  studentAnswer: ""
})
onMounted(() => {
  data.value = props.data
  console.log(data.value, props.data)
})
// console.log(props.data)
</script>
<style lang="scss" scoped>
.title {
  text-align: left;
  padding: 10px 0 10px 120px;
  font-size: 16px;
}
.option {
  padding: 10px 120px;
  .el-radio-group {
    width: 100%;
  }
  .item {
    flex-basis: 30%;
    text-align: left;
  }
}
</style>
